<template>
  <div class="balance h-100%">
    <div class="acea-row">
      <div
        v-for="item in tabList"
        :key="item.type"
        class="item acea-row row-center-wrapper text-16px mr-35px text-#666"
        :class="{ on: where.type === item.type }"
        @click="handleChangeTab(item.type,item.name)"
      >
        {{ item.name }}
      </div>
    </div>
    <agreement-rules :type="where.type" :name="where.name"></agreement-rules>
  </div>
</template>

<script lang="ts" setup>
import agreementRules from './components/agreementRules.vue'
const where = reactive({
 type: 'userinfo',
 name: '用户协议',
})

const tabList = ref([
  {
    name: '用户协议',
    type: 'userinfo',
  },
  {
    name: '隐私协议',
    type: 'userprivacyinfo',
  },
  {
    name: '入驻协议',
    type: 'merincomminginfo',
  },
  {
    name: '关于我们',
    type: 'aboutusinfo',
  },
  {
    name: '资质证明',
    type: 'intelligentinfo',
  },
  {
    name: '平台规则',
    type: 'platfromruleinfo',
  },
  {
    name: '注销协议',
    type: 'useraccountcancelinfo',
  },
  {
    name: '注销声明',
    type: 'useraccountcancelnoticeinfo',
  },
  {
    name: '优惠券协议',
    type: 'coupon/agreement/info',
  },
])

const handleChangeTab = (type: string,name: string) => {
  where.type = type
  where.name = name
}

</script>

<style scoped lang="scss">
.balance {
  .item {
    position: relative;
    cursor: pointer;
    &.on {
      color: #e93323;
      &::before {
        content: '';
        position: absolute;
        top: 31px;
        bottom: 18px;
        height: 2px;
        width: 22px;
        background: #e93323;
      }
    }
  }
  &-item {
    margin-bottom: 20px;
    &:nth-last-child(1) {
      margin-bottom: 0;
    }
  }
}
</style>
